<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/14
  Time: 18:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加题库数据</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="编辑数据"></el-page-header>
    <el-divider></el-divider>
    <el-row>
        <el-col :span="14">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="题目编号">
                    <el-row>
                        <el-col :span="16">
                            <el-input v-model="form.detailedTopicId" maxlength="10" show-word-limit></el-input>
                        </el-col>
                        <el-col :span="6" :offset="2">
                            <el-button type="primary" @click="queryDetailedTopicId" :plain="true" icon="el-icon-search">
                                搜索
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="题目信息">
                    <el-col :span="7">
                        <el-select v-model="form.topicGrade" placeholder="请选择年级">
                            <el-option label="七年级" value="七年级"></el-option>
                            <el-option label="八年级" value="八年级"></el-option>
                            <el-option label="九年级" value="九年级"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-input v-model="form.topicChapterName" placeholder="选择章节"></el-input>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <el-input v-model="form.topicKnowledgePoint" placeholder="选择节点"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="题目标题">
                    <el-input v-model="form.topicTitle" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="题目类型">
                    <el-select v-model="form.topicType" placeholder="请选择题目类型">
                        <el-option label="选择题" value="选择题"></el-option>
                        <el-option label="填空题" value="填空题"></el-option>
                        <el-option label="判断题" value="判断题"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题目选项">
                    <el-col :span="5" :offset="1">
                        <el-form-item label="A:" label-width="20">
                            <el-input show-word-limit v-model="form.topicCheck1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="B:" label-width="20">
                            <el-input show-word-limit v-model="form.topicCheck2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="C:" label-width="20">
                            <el-input show-word-limit v-model="form.topicCheck3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="D:" label-width="20">
                            <el-input show-word-limit v-model="form.topicCheck4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="题目答案">
                    <el-col :span="6">
                        <el-input v-model="form.topicAnswer" show-word-limit></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="答案解析">
                    <el-input type="textarea" show-word-limit v-model="form.topicAnswerParse"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即修改</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    topicChapterName: '',
                    topicTitle: '',
                    detailedTopicId: '',
                    topicAnswer: '',
                    topicKnowledgePoint: '',
                    topicType: '',
                    topicCheck1: '',
                    topicCheck2: '',
                    topicCheck3: '',
                    topicCheck4: '',
                    topicGrade: '',
                    topicAnswerParse:'',
                },
            }
        },
        methods: {
            goBack() {
                window.location.href = "http://localhost:8080/online_website/admin/index_admin.jsp";
            },
            queryDetailedTopicId(detailedTopicId) {
                detailedTopicId = this.form.detailedTopicId;
                if (detailedTopicId.length === 0) {
                    this.$message({
                        showClose: true,
                        message: '请输入题目编号',
                        type: 'warning',
                    });
                } else {
                    //发送数据
                    axios({
                        url: "http://localhost:8080/online_website/common/detailedTopicUpdate",
                        method: "get",
                        contentType: "application/json",
                        params: {
                            detailedTopicId: detailedTopicId,
                        }
                    }).then((res) => {
                        //获取数据
                        if ((JSON.stringify(res.data) !== "{}")) {
                            this.$message({
                                showClose: true,
                                message: '数据查询成功',
                                type: 'success'
                            });
                            this.form = res.data;
                            // this.form.detailedTopicId=detailedTopicId;
                        } else {
                            this.form="";
                            this.$message({
                                showClose: true,
                                message: '数据查询失败',
                                type: 'error'
                            });
                        }
                    })
                }

            },
            onSubmit() {
                axios({
                    url: "/online_website/common/detailedTopicUpdate",
                    method: "post",
                    contentType: "application/json",
                    params: this.form,
                }).then((res) => {
                    this.$message({
                        showClose: true,
                        message: '数据修改成功',
                        type: 'success'
                    });
                    console.log(res.data);
                })
            }
        }
    })
</script>
</html>
